<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no" />
    <title>登录</title>

    <link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{margin: 0;padding: 0;background-color: rgba(21, 193, 237, 0.5);cursor:url('/gb_1.ico') 16 16, auto;overflow: hidden;}
        body:active{cursor:url('/gb_2.ico') 16 16, auto;}
        .absolute{position: absolute;font-size: 10px;border: 1px solid #fff;border-radius: 50%;width: 15px;height: 15px;line-height: 15px;text-align: center;display: none;color:#fff;}
        #one,#two,#three,#four,#five{animation: wzanima 5s linear infinite;z-index:99999999}
        #wzbg{display: none;animation: anima 5s linear infinite;position: absolute;width:100px;height: 100px;z-index:-3}
        @keyframes wzanima{0%{transform: rotate(0deg);}100%{transform: rotate(-720deg);}}
        @keyframes anima{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
        @keyframes lodding{0%{top: -100px;}100%{top: 50%;}}
        canvas {display: block;width: 100%;height: 100%;position: absolute;z-index: -1;}
        form {margin: 50px;color: rgba(255, 255, 255, 0.7);}
        form .div {text-align: center;}
        form input{border:none;position: relative;z-index:99999;height:34px;line-height: 34px;padding:0;margin: 0;top:-2px;width:265px;background: rgba(255,255,255,0);outline: none;color:#fff;}
        #bigdiv {width: 400px;height: 320px;background: rgba(255, 255, 255, 0.1);box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.1);position: absolute;left: 50%;top: 50%;margin-top: -160px;margin-left: -200px;}
        .title {font-size: 30px;font-weight: bold;}
        .fb{width:30px;font-weight: bold;line-height: 40px;text-align: center;display: inline-block;}
        .intdiv{background: rgba(21, 193, 237, 0.6);line-height: 40px; margin-top: 10px;border-radius: 5px;}
        #login{background: rgba(21, 193, 237, 1);line-height: 40px; margin-top: 10px;border-radius: 5px;text-align: center;}
        #login div{position:relative;z-index: 99;}
        #lodding{background: #1276ED;text-align: center;position: absolute;left:50%;top:-100px;margin: -65px 0 0 -65px;width:130px;height: 130px;z-index:9999;border-radius: 20px;}

    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="lodding">
    <i class="fa fa-spinner fa-spin fa-4x fa-pulse" style="color:#fff;margin-top: 20px;" aria-hidden="true"></i>
    <div style="color:#fff;margin-top: 5px;">验证中</div>
</div>
<div id="bigdiv">
    <form id="form" action="post">
        <div class="div title">后台管理系统</div>
        <div class="div">Management System</div>
        <div class="intdiv">
            <span class="fb">U</span><input id="username" type="text">
        </div>
        <div class="intdiv">
            <span class="fb">P</span><input id="password" type="password">
        </div>
        <div id='login'>
            <div onclick="login()">登录</div>
        </div>
    </form>
</div>
<div  id="wzbg">
    <div id="one" class="absolute"></div>
    <div id="two" class="absolute"></div>
    <div id="three" class="absolute"></div>
    <div id="four" class="absolute"></div>
    <div id="five" class="absolute"></div>
</div>
</body>
<!--背景画布js-->
<script type="text/javascript" src="/js/xk.js"></script>
<!--文字跟随鼠标js-->
<script type="text/javascript" src="/js/gswz.js"></script>
<!--------------------------------------------------------------------->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(document).keypress(function(e) { 
	  if((e.keyCode || e.which)==13) { 
	  	// 触发需要调用的方法
	    login();
	  }
	 });
    function login(){
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        $('#lodding').css('animation','lodding 0.5s ease-in forwards');
        if(username && password){
            $.post("{:url('user/login')}",
                {
                    username,
                    password
                },
                function(res){
                    res = JSON.parse(res);
                    // error(res.message);
                    if(res.status == 'success'){
                    	setTimeout(function(){
                    		location.href = "{:url('admin/index/index')}";
                    	},1000)
                    }
                })
        }else{
            error('账号或密码为空');
        }
    }
    function error(str){
        $('#lodding').find('div').html(str);
        setTimeout(function(){
            $('#lodding').css('top','-200px');
            $('#lodding').css('animation','');
        },2000)
    }
</script>
</html>